<template>
    <div class>
        <Form ref="formData" :model="formData" :rules="formRules" :label-width="120">
            <Row>
                <Col :xs="24" :sm="12" :lg="8" :xl="6">
                    <FormItem label="收款银行" prop="accountBank">
                        <Select :disabled="readOnly || isFinance" v-model="formData.accountBank" clearable>
                            <Option
                                v-for="(item,index) in dataDict.payBankDict"
                                :key="index"
                                :value="item.value"
                            >{{item.title}}
                            </Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col :xs="24" :sm="12" :lg="8" :xl="6">
                    <FormItem label="打款金额" prop="amount">
                        <ruiNumber type="currency" @on-change="changeAmount"
                                     :disabled="readOnly || isFinance"
                                   :precision="2"
                                     v-model="formData.amount"/>
                    </FormItem>
                </Col>

                <Col :xs="24" :sm="12" :lg="8" :xl="6">
                    <FormItem label="打款时间" prop="accountDate">
                        <DatePicker :disabled="readOnly||isFinance"
                                    :options="options"
                                    type="date"
                                    :start-date="Date.now()"
                                    format="yyyy-MM-dd"
                                    placeholder="请选择"
                                    v-model="formData.accountDate"
                        ></DatePicker>
                    </FormItem>
                </Col>

                <Col :xs="24" :sm="12" :lg="8" :xl="6">
                    <FormItem label="打款人" prop="payerName">
                        <Input :disabled="readOnly||isFinance" type="text" v-model="formData.payerName"/>
                    </FormItem>
                </Col>
                <Col :xs="24" :sm="12" :lg="8" :xl="6">
                    <FormItem label="结余款项" prop="balanceAmt">
                        <ruiNumber type="currency" disabled
                                     v-model="formData.balanceAmt"
                                     :min="0"
                                   :precision="2"
                        />
                    </FormItem>
                </Col>
                <Col :xs="24" :sm="12" :lg="8" :xl="6">
                    <FormItem label="结余款项处理" prop="amtHandle">
                        <RadioGroup v-model="formData.amtHandle" @on-change="changeHandle">
                            <Radio :disabled="readOnly||isFinance" selected label="GIVE_UP">放弃</Radio>
                            <Radio :disabled="readOnly||isFinance" label="TAKE_BACK">收回</Radio>
                        </RadioGroup>
                    </FormItem>
                </Col>
                <Col :xs="24">
                    <FormItem label="上传打款凭证:" required>
                        <Button type="primary" @click="openUploadModal">打款凭证</Button>
                    </FormItem>
                </Col>
            </Row>
        </Form>
        <UploadFileModal ref="uploadFileModal" :modal="isUploadFileModalOpen" @closeModal="closeModal"
                         :param="fileParams" :isPreview="readOnly||isFinance"/>
    </div>
</template>

<script>
    import UploadFileModal from "_p/basic/pages/contract/common/uploadFileModal/uploadFileModal";
    import {verifyErrorToView} from "_p/basic/assets/contract/js/utils";

    export default {
        // 已放款项退回
        name: "Refunded",
        components: {
            UploadFileModal
        },
        props: {
            Obj: {
                type: Object,
            },
            dataDict: {
                type: Object
            },
            id: {
                type: String
            },
            readOnly: {
                type: Boolean,
                require: true
            }
        },
        data() {
            return {
                options: {
                    disabledDate(date) {
                        return date && date.valueOf() > Date.now();
                    }
                },
                disabled: false,
                isPreview: false,
                isFinance: false,
                isUploadFileModalOpen: false,
                fileParams: {},
                processModeDict: [],
                formRules: {
                    accountBank: [
                        {required: true, message: "请选择一项", trigger: "change"}
                    ],
                    amtHandle: [
                        {required: true, message: "请选择一项", trigger: "change"}
                    ],
                    amount: [
                        {required: true, message: "请输入打款金额"}
                    ],
                    accountDate: [
                        {required: true, message: "请输入打款时间"}
                    ],
                    payerName: [
                        {required: true, message: "请输入打款人", trigger: "blur"}
                    ],
                    balanceAmt: [
                        {required: true, message: "请输入结余款项"}
                    ]
                },
                formData: {
                    // 收款银行
                    accountBank: "",
                    // 打款金额
                    amount: null,
                    // 打款时间
                    accountDate: null,
                    // 打款人
                    payerName: "",
                    // 结余款项
                    balanceAmt: null,
                    // 结余款项处理
                    amtHandle: ""
                }
            };
        },
        mounted() {
            if (this.Obj.isFinance && !this.Obj.roleType) {
                this.isFinance = true;
            } else {
                this.isFinance = false;
            }
        },
        methods: {
            openUploadModal() {
                this.fileParams = {
                    belongNo: this.Obj.contractNo,
                    busiNo: this.Obj.caseNo,
                    busiType: 'overpayment',
                    busiData: {},
                    busiNodes: 'overpayment' //业务节点
                };
                this.isUploadFileModalOpen = true;
            },
            closeModal() {
                let l = this.$refs.uploadFileModal.getFileList()
                console.log('申请资料 文件长度为：', l);
                this.isUploadFileModalOpen = false;
            },
            changeAmount() {
                this.$emit('changeAmount', this.formData.amount);
            },
            changeHandle() {
                let flag = false;
                if (this.formData.amtHandle === 'TAKE_BACK') {
                    flag = true;
                }
                this.$emit('changeHandle', flag);
            },
            /*
             * formData 数据验证 验证通过后 将数据传回父级处理  (保存/提交/审核 通用)
             * @param {String} funcName 回传给父级的方法 (注意父级需要传方法)
             * @param {Object} [data]   父级带来的数据
             */
            formValidate(funcName, data) {
                if (!funcName) return;

                this.$refs.formData.validate(valid => {
                    if (valid) {
                        let d = Object.assign({}, data, this.formData);

                        this.$emit(funcName, d);
                    } else {
                        this.$Message.error("必填项不能为空!");
                        verifyErrorToView(this.$refs.formData.fields);
                    }
                });
            }
        }
    };
</script>

<style lang="less" scoped>
    .business form {
        width: 100%;
    }
</style>
